<template>
  <div>
    <button @click="changefn">情况三ref定义的监听基本数据类型</button>

    <div>数量：{{ age }}</div>
  </div>
</template>
<script setup lang="ts"  name= "person555">
import { reactive, ref, toRefs, toRef, computed, watch } from "vue"; //使用那个函数前必须先导入那个函数

let age = reactive({
  name: "张三",
  ages: 15,
  son: {
    name: "儿子", //需求现在我只想监测其中某某几个值的改变,
    age: 2,
  },
});

let changefn = () => {
  age.son.age = age.son.age + 1;
};

// 情况5 监测多个东西时候写成一个数字
//  其实第一个参数数组里面未必都需要写成函数   如果你不需要关注细小的变化  直接内存地址的改变 直接age.son就可以 
watch(
  [() => age.name, () => age.son],
  (newvalue, oldvalue) => {
    console.log("age变化啦", newvalue, oldvalue); //新值旧值可能一样 这个不仅在vue3中有这个问题,vue2中也有这个问题,若直接替换内存地址  他的新旧之不同
  },
  { deep: true }
);
</script>